<app-navigation></app-navigation>
<div class="flex-row width-100">
<div class="width-50 padding">
  <table mat-table [dataSource]="users" class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="surname">
      <th mat-header-cell *matHeaderCellDef> Surname </th>
      <td mat-cell *matCellDef="let element"> {{element.surname}} </td>
    </ng-container>

    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef> Username </th>
      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
<div class="width-50 center-horizontal padding center-vertical">
  <mat-tab-group class="border">
    <mat-tab label="Register">
      <div class="padding flex-column">
        <br>
        <div class="mat-headline-3" style="margin-bottom: 30px;">Register</div>
        <br>
        <form [formGroup]="registrationForm" class="flex-column center-horizontal width-60">
          <mat-form-field>
            <mat-label>Name</mat-label>
            <input matInput formControlName="name">
            <mat-error *ngIf="registrationForm.controls['name'].hasError('required')">
              Name is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label>Surname</mat-label>
            <input matInput formControlName="surname">
            <mat-error *ngIf="registrationForm.controls['surname'].hasError('required')">
              Surname is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label>Username</mat-label>
            <input matInput formControlName="username">
            <mat-error *ngIf="registrationForm.controls['username'].hasError('required')">
              Email is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input matInput formControlName="password" type="password">
            <mat-error *ngIf="registrationForm.controls['password'].hasError('required')">
              Password is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <button mat-raised-button color="primary" class="width-exact center-horizontal" (click)="register()">Register</button>
        </form>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>
</div>

